<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <!--

        CSS引入方式：

            内联样式：行内样式，在标签中引入CSS样式

            内部样式：在head标签中创建style标签，在style标签中创建各类选择器，在选择器中设置样式。

            外部样式：在外部创建css文件，然后在head标签中创建link标签，引入外部的css文件

        CSS基本选择器：
            标签选择器(元素选择器)：为某个标签设置样式
                标签名{
                    样式名:样式值;
                }

            class选择器(类选择器)：为某个class值设置选择器，
                .class值{
                    样式名:样式值;
                }
            id选择器：为某个id值设置选择器
                #id值{
                    样式名:样式值;
                }
        CSS注释：
                /*

                */
    -->
    <style>
        body{
            /*设置背景颜色*/
            /*background-color: #FF0000;*/
            /*设置背景图片*/
            background-image: url("https://tse1-mm.cn.bing.net/th/id/OIP-C.jf9y42BAz5A0XOVT3DgzWQHaEK?rs=1&pid=ImgDetMain");
            /*
                设置背景重复
                background-repeat: no-repeat; 不重复
                background-repeat: repeat-x;  x轴重复
                background-repeat: repeat-y;  y轴重复
            */
            background-repeat: no-repeat;
            /*
                设置背景附着
                background-attachment: fixed; 指定应该固定背景图像
                background-attachment: scroll; 指定背景图像应随页面的其余部分一起滚动
            */
            background-attachment: scroll;

            /*
                背景属性简写，如需缩短代码，也可以在一个属性中指定所有背景属性。它被称为简写属性。
                在使用简写属性时，属性值的顺序为：

                background-color
                background-image
                background-repeat
                background-attachment
                background-position
                属性值之一缺失并不要紧，只要按照此顺序设置其他值即可。请注意，在上面的例子中，
                我们没有使用 background-attachment 属性，因为它没有值。

            */
            background: #ffffff url("../img/3.png") no-repeat right top;

        }

        h1{
            color: #000;
            /*
                设置边框宽度
                border-width:10px;设置所有边框的宽度
                border-width:10px 20px; 设置上下边框为10px，左右边框为20px
                border-width:10px 20px 30px 50px;   设置上边框10px 右边框20px 下边框30px 左边框50px
            */
            border-width:10px 20px 30px 50px;
            /*
                border-color 设置边框颜色
            */
            border-color:#f00 #0f0 #00f #000;
        }

        /*
            边框样式

        */
        .border01{
            border-style:dotted;
        }
        .border02{
            border-style:dashed ;
        }
        .border03{
            border-style:solid;
        }
        .border04{
            border-style:double;
        }
        .border05{
            border-style:groove;
        }
        .border06{
            border-style:ridge;
        }
        .border07{
            border-style:inset;
        }
        .border08{
            border-style:outset;
        }
        .border09{
            border-style:none;
        }
        .border10{
            border-style:hidden;
        }

        .border11{
            /*
                单独设置各边
            */
            border-top-style: dotted;
            border-right-style: solid;
            border-bottom-style: inset;
            border-left-style: groove;
        }
        .border12{
            /*
                border 属性是以下各个边框属性的简写属性：
                border-width
                border-style（必需）
                border-color
            */
            border: 20px solid #0ff000;
            /*
                为边框添加圆角。5px为边框圆角半径
                border-radius:5px
            */
            border-radius:100px
        }

    </style>
</head>
<body>
    <h1 class="border01">定义点线边框</h1>
    <h1 class="border02">定义虚线边框</h1>
    <h1 class="border03">定义实线边框</h1>
    <h1 class="border04">定义双边框</h1>
    <h1 class="border05">定义 3D坡口边框。效果取决于border-color 值</h1>
    <h1 class="border06">定义 3D 脊线边框。效果取决于border-color 值</h1>
    <h1 class="border07">定义 3D inset 边框。效果取决于 border-color 值</h1>
    <h1 class="border08">定义 3Doutset边框。效果取决于border-color 值</h1>
    <h1 class="border09">定义无边框</h1>
    <h1 class="border10">定义隐藏边框</h1>
    <h1 class="border11">单独设置各边</h1>
    <h1 class="border12">边框简写属性</h1>



</body>
</html>